<!--
 * @Author: zhuxiaoyi
 * @Date: 2024-01-09 10:50:36
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2024-08-12 16:12:22
 * @Description: 
-->
<template>
    <el-row>
        <el-col :span="24">
            <el-card>
                <el-row>
                    <el-col :span="24" style="display: flex;justify-content:flex-end;padding-bottom: 20px;">
                        <el-button type="success" :icon="Plus" size="small" @click="addNewProcess">新建流程</el-button>
                    </el-col>
                </el-row>
                <el-tabs type="border-card" v-model="currentType" @tab-change="tabChangeHandler">
                    <el-tab-pane :label="type.name" :name="type.id" v-for="type in processTypeList" :key="type.id">
                        <div class="type-title-warp">
                            <p class="type-des">
                                <el-icon class="type-icon">
                                    <info-filled />
                                </el-icon>
                                {{ type.desc }}
                            </p>
                        </div>
                        <div :style="`height:${view.height - 325}px;`" class="process-list-con"
                            v-loading="graphsLoading">
                            <el-empty v-if="graphs.length == 0" description="暂无流程" :image-size="300">
                            </el-empty>
                            <el-card class="process-item-card" v-for="graph in graphs" :key="graph.id">
                                <el-image :src="graph_cover" style="height: 90px;" />
                                <div class="interduce" :title="graph.name">
                                    <div class="btns">
                                        <el-button-group>
                                            <el-popconfirm title="确定要复制当前流程么?"
                                                @confirm="copyProcess(graph.id, type.id)">
                                                <template #reference>
                                                    <el-button plain type="primary" size="small"
                                                        :icon="DocumentCopy">复制</el-button>
                                                </template>
                                            </el-popconfirm>
                                            <el-button plain type="primary" size="small" :icon="Edit"
                                                @click="enterToGraph(graph)">编辑</el-button>
                                            <el-popconfirm title="确定要删除当前流程么?" @confirm="deleteProcess(graph.id)">
                                                <template #reference>
                                                    <el-button plain type="primary" size="small"
                                                        :icon="Delete">删除</el-button>
                                                </template>
                                            </el-popconfirm>
                                        </el-button-group>
                                    </div>
                                    <h2 :title="graph.name">{{ graph.name }}</h2>
                                    <p class="des" :title="graph.desc">
                                        {{ graph.desc }}
                                    </p>
                                    <p class="time">
                                        {{ utils.formatDate(graph.createDate) }}
                                        <el-button type="success" size="small" text :icon="VideoPlay"
                                            @click="executeGraph(graph)">
                                            流程执行
                                        </el-button>
                                    </p>
                                </div>
                            </el-card>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
        </el-col>
    </el-row>
</template>
<script setup lang="ts">
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from "vue";
import {
    Delete,
    Edit,
    VideoPlay,
    Plus, DocumentCopy
} from '@element-plus/icons-vue'
import { useRoute, useRouter } from "vue-router";
import graph_cover from '@/assets/img/graph_cover.png'

import HttpService from "@/api/api";
// import * as _ from "lodash";
import { ElMessage, ElMessageBox } from "element-plus";
import utils from "@/utils/util";
let processListPagination = reactive({
    page_index: 1,
    page_size: 100,
    page_total: 0,
});
let keyword = ref('')
let currentType = ref('')
const graphs = ref([])
const graphsLoading = ref(false)
const processTypeList = ref([])
const processTypeLoading = ref(false)

const router = useRouter()

onMounted(() => {
    if (localStorage.getItem('currentType')) {
        currentType.value = localStorage.getItem('currentType')
    }
});
var view = reactive({
    height: window.innerHeight,
});


const getprocessTypeList = function () {
    let params = {
    };
    processTypeLoading.value = true
    processTypeList.value.length = 0
    HttpService.processTypeListManage.processTypes(
        params,
        (res) => {
            setTimeout(() => {
                if (res.status == 200) {
                    res.data.data.map((item, index) => {
                        processTypeList.value.push(item);
                    });
                    if (graphs.value.length == 0) {
                        console.log(localStorage.getItem('currentType'))
                        if (!localStorage.getItem('currentType')) {
                            currentType.value = processTypeList.value[0].id
                            localStorage.setItem('currentType', currentType.value)
                        } else {
                            currentType.value = localStorage.getItem('currentType')
                        }
                        getGraphsByType(currentType.value)
                    }
                } else {
                    console.log("获取信息失败" + res);
                }
                processTypeLoading.value = false
            }, 300)
        },
        (error) => {
            console.log(error);
            processTypeLoading.value = false
        }
    );
};
const enterToGraph = function (process) {
    router.push('/index/general/processManage/processGraph/' + process.id)
}
const executeGraph = function (process) {
    router.push('/index/general/processManage/executeGraph/' + process.id)
}

const addNewProcess = function () {
    router.push('/index/general/processManage/processGraph/newGraph')
}
const deleteProcess = function (id) {
    let params = {
        id
    };
    HttpService.processListManage.deleteProcess(
        params,
        (res) => {

            if (res.status == 200) {
                ElMessage({
                    message: res.data.message,
                    type: 'success',
                })
                getGraphsByType(currentType.value)
            } else {
                console.log("获取信息失败" + res);
            }
        },
        (error) => {
            console.log(error);
        }
    );
}


const tabChangeHandler = function (tab) {
    localStorage.setItem('currentType', tab)
    getGraphsByType(tab)
}

const getGraphsByType = function (type) {
    let params = {
        id: type
    };
    graphs.value.length = 0;
    graphsLoading.value = true
    HttpService.processListManage.getGraphsByType(
        params,
        (res) => {
            setTimeout(() => {
                if (res.status == 200 && res.data.data) {
                    res.data.data.map((item, index) => {
                        if (!item.isCopyed) {
                            graphs.value.push(item);
                        }
                    });
                    graphsLoading.value = false
                } else {
                    console.log("获取流程失败" + res);
                    graphsLoading.value = false
                }
            }, 300)
        },
        (error) => {
            console.log(error);
            graphsLoading.value = false
        }
    );
};

// getprocessList()
getprocessTypeList()


const copyProcess = function (id, type) {
    let params = {
        id,
    };
    HttpService.processListManage.copyProcess(
        params,
        (res) => {
            if (res.status == 200) {
                ElMessage({
                    message: '复制流程成功',
                    type: 'success',
                })
                getGraphsByType(type)
            } else {
                console.log("复制流程失败" + res);
            }
        },
        (error) => {
            console.log(error);
        }
    );
}

/* window.onresize = _.debounce(() => {
    view.height = window.innerHeight;
}, 100); */

</script>
<style lang="scss" scoped>
.type-title-warp {
    display: flex;
    width: 100%;

    .type-title {
        font-weight: 600;
        margin-right: 20px;
        font-size: 16px;
    }

    .type-des {
        color: #999;
        display: flex;
        align-items: center;

        .type-icon {
            font-size: 18px;
            margin-right: 5px;
        }
    }
}

.process-list-con {
    margin-top: 20px;
    overflow: auto;

    /*  .process-card {
        margin: 0 5px 20px 5px;
        height: 260px;
        float: left;

        .tine {
            color: #999;
            margin: 5px 0;
            font-size: 12px;
        }

        .process-name-con {
            width: 150px;
            overflow: hidden;
      
            white-space: nowrap;
           
            text-overflow: ellipsis;
            
            cursor: pointer;
        }
    } */
    .process-item-card {
        width: 370px;
        height: 130px;
        border-radius: 5px;
        margin: 0 20px 20px 0;
        float: left;

    }
}
</style>
<style lang="scss">
.process-item-card {
    .el-card__body {
        padding: 0;
        display: flex;
        align-items: center;

        .interduce {
            padding-left: 10px;
            width: 260px;

            .btns {
                display: flex;
                justify-content: flex-end;
            }

            h2 {
                font-size: 14px;
                font-weight: 500;
                padding: 5px 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis
            }

            .des {
                color: #999;
                font-size: 12px;
                overflow: hidden;
                text-overflow: ellipsis;
                /* 将对象作为弹性伸缩盒子模型显示 */
                display: -webkit-box;
                /* 限制在一个块元素显示的文本的行数 */
                /* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
                -webkit-line-clamp: 2;
                /* 设置或检索伸缩盒对象的子元素的排列方式 */
                -webkit-box-orient: vertical;
                line-height: 20px;
                height: 40px;
            }

            .time {
                color: #999;
                font-size: 12px;
                display: flex;
                justify-content: space-between;
            }
        }
    }
}

.el-button {
    --el-button-divide-border-color: none
}
</style>